<template>
	<h1>TodoList</h1>
	<input type="text" v-model="val" @keyup.enter="addUser">
	
	<ul>
		<li v-for="(item,index) in todos">
			{{item}}
		</li>
		<li>敲代码</li>
	</ul>
	<p>这是待办事项</p>
</template>

<script>
	import {reactive,toRefs} from 'vue'
	export default{
		
		setup(){
			const data = reactive({
				val:'',
				todos:[
					{name:'学习',show:false},
					{name:'敲代码',show:false}
				]
			})
			const addUser = ()=>{
				//向前添加
				data.todos.unshift()(
					{name:data.val,show:false}
					data.val = ''
				)
				//向后添加
				data.todos.push(
					{name:data.val,show:false}
					data.val = ''
				)
			}
			
			return{
				addUser,
				...toRefs(data)
			}
		}
	}
</script>

<style>
</style>
